import React,{useState,useEffect} from "react";
import "./Earnings.less";
import { Button, Card, Statistic, Row, Col } from "antd";
import { ArrowUpOutlined, ArrowDownOutlined } from "@ant-design/icons";
import LineEchart from "../../../components/LineEchat/LineEchat";
import { Link } from "react-router-dom";
import http from "../../../utils/http";

export default function Earnings() {
  const [todayIncome, setTodayIncome] = useState(0)
  const [weekIncome, setWeekIncome] = useState(0)
  const [monthIncome, setMonthIncome] = useState(0)
  const [incomedata, setIncomedata] = useState({})

  useEffect(() => {
    console.log(123);
    http({
      url: "api/index/selectIncome",
      method: "get",
    }).then((res) => {
      console.log(res);
      if(res.code=200){
        setTodayIncome(res.data.todayIncome)
        setWeekIncome(res.data.weekIncome)
        setMonthIncome(res.data.monthIncome)
        setIncomedata(res.data.incomedata)
      }
    });
  }, [incomedata])
  
  return (
    <div id="hp_newData">
      <div className="headBtn">
        <Link to={"/home/homepage"}>
          <Button
            type="primary"
            size="large"
            style={{ backgroundColor: "cornflowerblue" }}
          >
            返回
          </Button>
        </Link>
        <Link to={"/home/homepage/newdata"}>
          <Button
            type="primary"
            size="large"
            style={{ backgroundColor: "cornflowerblue" }}
          >
            今日人数
          </Button>
        </Link>
        <Button type="primary" size="large" disabled={true}>
          今日收益
        </Button>
      </div>
      <Card className="cardCon">
        <Row gutter={[16, 30]}>
          <Col span={24}>
            <Card className="cardCon">
              <p>收益概况</p>
              <div className="showData">
                <div className="aData">
                  <p>今日收益</p>
                  <span className="num">{todayIncome}</span>
                  <span>元</span>
                  <Statistic
                    title="日"
                    value={11.28}
                    precision={2}
                    valueStyle={{ color: "#3f8600" }}
                    prefix={<ArrowUpOutlined />}
                    suffix="%"
                  />
                  <Statistic
                    title="周"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: "#cf1322" }}
                    prefix={<ArrowDownOutlined />}
                    suffix="%"
                  />
                  <Statistic
                    title="月"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: "#cf1322" }}
                    prefix={<ArrowDownOutlined />}
                    suffix="%"
                  />
                </div>

                <div className="aData">
                  <p>本周收益</p>
                  <span className="num">{weekIncome}</span>
                  <span>元</span>
                  <Statistic
                    title="周"
                    value={11.28}
                    precision={2}
                    valueStyle={{ color: "#3f8600" }}
                    prefix={<ArrowUpOutlined />}
                    suffix="%"
                  />
                  <Statistic
                    title="月"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: "#cf1322" }}
                    prefix={<ArrowDownOutlined />}
                    suffix="%"
                  />
                </div>
                <div className="aData">
                  <p>本月收益</p>
                  <span className="num">{monthIncome}</span>
                  <span>元</span>

                  <Statistic
                    title="月"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: "#cf1322" }}
                    prefix={<ArrowDownOutlined />}
                    suffix="%"
                  />
                </div>            
              </div>
            </Card>
          </Col>
          <Col span={24}>
            <Card className="cardCon">
              <LineEchart data={incomedata} />
            </Card>
          </Col>
        </Row>
      </Card>
    </div>
  );
}
